[HTML5] 시맨틱 요소의 사용과 IE8에서의 문제점

시맨틱(Semantic)이란 ’의미있는’이란 사전적 의미를 가지고 있습니다. 결국 의미가 있는 요소를 시맨틱 요소라고 할 수 있는데요... 기존의 시맨틱 요소는 아래를 보시면...

<form>
<input>
<textarea>

이와 같이 어떤 기능을 가지고 있는데 의미를 알 수 있는 요소를 말합니다. 이와 달리 div나 span 요소들은 그 의미를 알 수가 없죠... 결국 시맨틱 요소가 많아지는 것은 좀 더 의미가 담긴... 이해하기 쉬운 웹 페이지 빌드가 가능하다는 뜻입니다... HTML5에서는 아래와 같은 새로운 시맨틱 요소를 제공합니다.

<header>
<nav>
<section>
<article>
<aside>
<footer>
<time>
<mark>
<summary>
<figure>
<figcapture>

<abbr>
<var>


보시는 바와 같이 새로운 요소들은 대략적으로 어떤 의미를 가지고 있는지 유추하실 수 있을 것입니다. 이런 요소를 지원함으로써 좀 더 의미있는 웹페이지를 빌드할 수 있지만 아직 일부 브라우저에서는 100% 호환되지는 않습니다. 아래는 이를 수정하기 위한 CSS와 Script입니다. HTML5 적용시 참고해주세요.


<style>
header, nav, section, article, aside, footer, time, mark, summary, figure, figcapture, hgroup {
display: block;
}
</style>

<script>
’header nav section article aside footer time mark summary figure figcapture hgroup’.replace(/\\w+/g,function(n){
document.createElement(n)
});
</script>